<template>
  <div class="map">
    <div class="heard" v-if="show">
      <span>{{heardfont}}</span>
      <strong v-on:click="contor" v-if="set7">{{heard}}</strong>
    </div>
    <div class="content">
      <!-- 用户框 -->
      <div class="input setPhone" id="setPhone">
        <Input v-if="set" :text="text" @codeset="codephone" class="codephone" />
      </div>
      <!-- 密码框 -->
      <div class="input">
        <Input v-if="set1" :text="text1" />
      </div>
      <div class="input setPass">
        <!-- 确认密码框 -->
        <Input v-if="set8" :text="text3" @codeset="codepass" class="codepass" />
      </div>
      <!-- 验证框 -->
      <div class="setCode">
        <input type="text" v-model="yzm" placeholder="验证码" @input="duibi" class="codeinput" maxlength=4 />
        <SIdentify :identifyCode="identifyCode"></SIdentify>
        <span @click="refreshCode" class="codefont">看不清,换一张</span>
      </div>
      <!-- 验证信息 -->
      <p v-if="showcode" class="showcode">验证码错误</p>
      <Phonecode v-if="set6">1</Phonecode>
    </div>
    <div class="btn" v-if="set4">
      <input type="checkbox" />自动登陆
      <span @click="back">忘记密码?</span>
    </div>
    <!-- 登录的按钮 -->
    <Kfooter v-if="set5" @newset="newye" @loginset="setlogin"></Kfooter>
    <div class="agree" v-if="set9">
      <div class="btnagree">
        <input type="radio" name="yes" />我已阅读并同意《礼拜五用户协议》
      </div>
      <div class="btn1">
        <input type="button" value="注册" class="login" @click="newname" />
        <input type="button" value="登录" class="loginbtn" @click="gotoindex" />
      </div>
    </div>
    <div v-if="set10" class="tijiao">
      <input type="button" value="提交" class="btnTi" @click="setback" />
    </div>
  </div>
</template>
<script>
import Input from "@/components/BX-Input.vue";
import SIdentify from "@/components/identify.vue";
import Kfooter from "@/components/BX-kuangFooter.vue";
import Phonecode from "@/components/Bx-phonCode.vue";
import $ from "jquery";
export default {
  components: {
    Input,
    SIdentify,
    Kfooter,
    Phonecode
  },
  data() {
    return {
      heardfont: "登录",
      heard: "手机验证",
      text: "请输入用户名",
      text1: "请输入密码",
      text2: "验证码",
      text3: "请再次输入密码",
      identifyCode: "",
      identifyCodes: "1234567890",
      yzm: "",
      seturl: "",
      show: true,
      set: true,
      set1: true,
      set2: true,
      set3: true,
      set4: true,
      set5: true,
      set6: false,
      set7: true,
      set8: false,
      set9: false,
      set10: false,
      showcode:false,
    };
  },
  mounted() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  methods: {
    // 验证码
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
    },
    duibi() {
     if(this.yzm.length >3 && this.yzm !=this.identifyCode){
       this.showcode=true;
     }else {
       this.showcode=false;
     }
    },
    contor() {
      this.heard = "账号密码登录";
      this.text = "请输入手机号";
      this.set1 = false;
      this.set6 = true;
    },
    newye() {
      this.show = false;
      this.text = "请输入手机号";
      this.text1 = "请输入密码(6-20位符号字符)";
      this.set8 = this.set6 = this.set9 = true;
      this.set4 = this.set5 = false;
      this.$emit("gaiheard");
      $(".intput").each(function(i) {
        this.value = "";

        window.console.log(i);
      });
    },
    back() {
      this.$emit("xiugai");
      this.heardfont = "重置密码";
      this.text = "请输入手机号";
      this.text1 = "请输入密码(6-20位符号字符)";
      this.set8 = this.set6 = this.set9 = this.set10 = true;
      this.set7 = this.set4 = this.set5 = this.set9 = false;
    },
    setback() {
      const list = this.getinput();
      var _this = this;
      var url = "http://localhost:3000";
      _this.$axios
        .post(url + "/login/back", {
          data: {
            phone: list[0],
            passworld: list[1]
          } /*  */
        })
        .then(function(response) {
          window.console.log(response);
          if (response.data.code == "200") {
            window.console.log("++++++++++++");
            _this.$emit("xiugai");
            _this.heardfont = "登录";
            _this.text = "请输入手机号";
            _this.text1 = "请输入密码(6-20位符号字符)";
            _this.set8 = _this.set6 = _this.set9 = _this.set10 = false;
            _this.set7 = _this.set4 = _this.set5 = true;
            $(".input input").val("");
          } else {
            alert("你输入的手机号不存在请重新输入");
            $(".input input").val("");
          }
        })
        .catch(function(error) {
          _this.dataMsg = error;
          window.console.log(error);
        });
    },
    // 注册请求
    newname() {
      let setcheck = $(".btnagree input").prop("checked");
      if (setcheck) {
        this.show = true;
        this.set8 = this.set6 = this.set9 = this.set10 = false;
        this.set4 = this.set5 = true;
        this.$emit("login");
        const passlist = this.getinput();
        var _this = this;
        var url = "http://localhost:3000";
        _this.$axios
          .post(url + "/login/newUser", {
            data: {
              phone: passlist[0],
              passworld: passlist[1]
            }
          })
          .then(function(response) {
            if (response.data.code == "200") {
              // _this.newurl="/index"
              _this.$router.push("/index");
            } else {
              alert("你输入的密码有误，请重新输入");
            }
          })
          .catch(function(error) {
            _this.dataMsg = error;
            window.console.log(error);
          });
      }
    },
    //获取input 的值
    getinput() {
      const passlist = [];
      $(".input input").each(function(i, v) {
        passlist.push(v.value);
        window.console.log(i, passlist);
      });
      return passlist;
    },
    // 判断是否点击已阅读协议进行跳转
    gotoindex() {
      let setcheck = $(".btnagree input").prop("checked");
      if (setcheck) {
        this.$router.push("/index");
      }
    },
    // 登录请求
    setlogin() {
      const login = this.getinput();
      // 登录请求
      var _this = this;
      var url = "http://localhost:3000";
      window.console.log("1");
      this.$axios
        .post(url + "/login/pa", {
          data: {
            name: login[0],
            passworld: login[1]
          }
        })
        .then(function(response) {
          if (response.data.code == "200") {
            // _this.newurl="/index"
            _this.$router.push("/index");
          } else {
            alert("你输入的密码有误，请重新输入");
          }
        })
        .catch(function(error) {
          _this.dataMsg = error;
          window.console.log(error);
        });
    },
    //手机验证（当输入框失去焦点提示信息）
    codephone() {
      var _this = this;
      const num = $(".codephone input").val();
      window.console.log(num);
      if (num.length != 11) {
        _this.onoff = false;
      }
      //移动
      let CM_NUM =
        "^((13[4-9])|(147)|(15[0-2,7-9])|(17[8])|(18[2-4,7-8]))\\d{8}|(170[5])\\d{7}$";

      //联通
      let CU_NUM =
        "^((13[0-2])|(145)|(15[5-6])|(17[156])|(18[5,6]))\\d{8}|(170[4,7-9])\\d{7}$";

      //电信
      let CT_NUM =
        "^((133)|(149)|(153)|(17[3,7])|(18[0,1,9]))\\d{8}|(170[0-2])\\d{7}$";

      let isMatch_CM = num.match(CM_NUM); // 匹配移动
      let isMatch_CU = num.match(CU_NUM); // 匹配联通
      let isMatch_CT = num.match(CT_NUM); // 匹配电信
      if (isMatch_CM || isMatch_CT || isMatch_CU) {
        _this.onoff = true;
      } else {
        _this.onoff = false;
      }

      if (_this.onoff) {
        _this.onoff = true;
      } else {
        $(".codephone input").css({ marginBottom: "0px" });
        $("<span>")
          .html("你输入的手机号格式有误，请重新输入")
          .addClass("iconfont icon-gantanhao")
          .addClass("jinggao")
          .css({
            color: "red",
            fontSize: "12px"
          })
          .appendTo(".setPhone");
      }
      $(".codephone input").on("focus", function() {
        $(".codephone input").css({ marginBottom: "15px" });
        $(".jinggao").remove();
      });
    },
    // 验证密码
    codepass() {
      const passlist = this.getinput();
      if (passlist[1] != passlist[2]) {
        $(".codephone input").css({ marginBottom: "0px" });
        $("<span>")
          .html("你输入的两次密码不相同，请重新输入")
          .addClass("iconfont icon-gantanhao")
          .addClass("jinggao")
          .css({
            color: "red",
            fontSize: "12px"
          })
          .appendTo(".setPass");
      }
      $(".codepass input").on("focus", function() {
        $(this)
          .parent()
          .siblings()
          .remove();
      });
    }
  }
};
</script>
<style scoped>
.map {
  width: 280px;
  height: 100%;
  padding: 10px 40px;
  background: #fff;
  position: absolute;
  top: 0px;
  left: 60%;
}
.content {
  width: 100%;
}
.heard {
  width: 100%;
  margin-bottom: 10px;
  overflow: hidden;
}
.heard span {
  font-size: 25px;
  float: left;
  line-height: 30px;
}
.heard strong {
  float: right;
  line-height: 30px;
}

.code {
  width: 80%;

}
.setCode {
  width: 100%;

  display: flex;
  justify-content: space-between;
  align-items: center;	
  font-size: 14px;
  
}
.codeinput {
  width: 30%;
  height: 40px;
}

.btn {
  width: 100%;
  float: left;
  text-align: left;
}
.btn span {
  float: right;
  color: #f18c26;
}
.agree {
  width: 100%;
  float: left;
}
.btnagree {
  font-size: 14px;
  float: left;
}
.btn1 {
  width: 100%;

  display: flex;
  justify-content: space-around;
}
.btn1 input {
  width: 35%;
  height: 35px;
  background: #f08200;
  border: none;
  color: #fff;
  font-size: 14px;
  margin-top: 10px;
}

.btn1 .new {
  width: 40%;
  float: right;
  background: #498e3d;
}
.content .setPhone span {
  color: red;
  font-size: 12px;
}
.tijiao {
  width: 100%;
}
.btnTi {
  width: 100%;
  height: 35px;
  border: none;
  color: #fff;
  background: #f08200;
}
.showcode{
  font-size: 13px;
  color:red;
}
</style>
    
